<template>
  <nav :class="{'menu-sidebar': true, 'is-hide-sidebar': !isShowMenu}">
    <ul class="menu-list" v-show="isShowMenu" transition="expand-in-left" v-el:menu>
      <li
        :class="nodeClass(menu.id, menu.leaf)"
        v-for="menu in sortMenuList">
        <div class="cell node-cell" @click.stop="toogleNode(menu.id)">
          <i class="fa fa-desktop"></i>
          <div class="txt">
            {{menu.name}}
          </div>
          <i class="fa fa-angle-down"></i>
        </div>
        <ul class="children-list" v-show="nodeCheck(menu.id, menu.leaf)" transition="collapse">
          <template v-for="children in menu.children">
            <li v-if="children.leaf" class="cell"
              :class="nodeClass(children.id, children.leaf)"
              @click.stop="route(children, menu.id)">
              {{children.name}}
            </li>
            <li v-else :class="nodeClass(children.id, children.leaf)">
              <div class="cell node-cell" @click.stop="toogleNode(menu.id, children.id)">
                <div class="txt">
                  {{children.name}}
                </div>
                <i class="fa fa-angle-down"></i>
              </div>
              <ul class="children-list" v-show="nodeCheck(children.id, children.leaf)" transition="collapse">
                <template v-for="leaf in children.children">
                  <li class="cell"
                    :class="nodeClass(leaf.id, true)"
                    @click.stop="route(leaf, menu.id, children.id)"
                    >{{leaf.name}}</li>
                </template>
              </ul>
            </li>
          </template>
        </ul>
      </li>
    </ul>
    <div class="menu-control ly-row-flex flex-center flex-middle" @click="toogleShowMenu">
      <i class="icon-control fa fa-angle-left" :class="{'is-hide-menu': !isShowMenu}"></i>
    </div>
  </nav>
</template>

<style src="./menu.css" scoped></style>
<script src="./menu.js"></script>
